<template>
	<view>
		<view class="fixed">
			<view class="image">
				<img src="../../static/images/pic.jpg" alt="" srcset="">
			</view>
			
			<view class="statusList">
				<block v-for="(item,index) in list" :key="index">
					<view class="swiper-tab-list" :class="current == item.id?'active':''" @tap="getSize(item.id)">
						{{item.name}}
						<view :class="current == item.id?'bottomLine':''"></view>
					</view>
				</block>
			</view>
		</view>
		<view class="top">
			<view class="main" v-if="orderList.length != 0 && current == 0">
				<view class="content">
					<view class="infoList_content" v-for="(info,index) in orderList" :key="index" @click="getOrderDetail(info.id)">
						<!-- <view :class="info.status == 0 ? 'status' : info.status == 1 ? 'status1' : 'status2'">
							{{info.status == 0 ? '待接单': info.status == 1 ? '待回收' : '已回收'}}
						</view> -->
						<view class="">
			
						</view>
						<view
							:class="info.state == 0 ? 'status' : info.state == 1 ? 'status1' : info.state == 2 ? 'status2' : 'status5'">
							{{info.state == 0 ? '已取消': info.state == 1 ? '待接单' : info.state == 2 ? '待回收' : '已回收'}}
						</view>
						<view class="flx_type">
							<view class=""> {{info.name == null ? info.typeName : info.name}}</view>
							<view class="weightNum">约 <text>{{info.num == null ? info.totalWeight : info.num}}</text> {{info.unit}}</view>
						</view>
						<view class="line"></view>
						<view class="flx_evaluate">
							<view class="">
								<view class="name">订单编号: {{info.id}}</view>
								<view class="name">预约时间: {{info.reservationDay}} {{info.reservationHour}}
								</view>
								<view class="name">联系方式: {{info.userMobile}}</view>
							</view>
							<view @click="cancle(info.id)" :class="info.state == 1 ? 'status' : ''">
								{{info.state == 1 ? '取消' : ''}}
							</view>
						</view>
					</view>
					<u-loadmore :status="status" :iconSize="17"  />
				</view>
				
			</view>
			<view class="main" v-if="orderList.length != 0 && current == 1">
				<view class="content">
					<view class="infoList_content" v-for="(info,index) in orderList" :key="index" >
						<view class="">
			
						</view>
						<view
							:class="info.state == 0 ? 'status' : info.state == 1 ? 'status1' : info.state == 2 ? 'status2' : 'status5'">
							{{info.state == 0 ? '已取消': info.state == 1 ? '待接单' : info.state == 2 ? '待回收' : '已回收'}}
						</view>
						<view class="flx_type" @click="getOrderDetail(info.id)">
							<view class=""> {{info.name == null ? info.typeName : info.name}}</view>
							<view class="weightNum">约 <text>{{info.num == null ? info.totalWeight : info.num}}</text> {{info.unit}}</view>
						</view>
						<view class="line"></view>
						<view class="flx_evaluate">
							<view class="" >
								<view class="name" @click="getOrderDetail(info.id)">订单编号: {{info.id}}</view>
								<view class="name" @click="getOrderDetail(info.id)">预约时间: {{info.reservationDay}} {{info.reservationHour}}
								</view>
								<view class="name" @click="makeCall(info.userMobile)">联系方式: {{info.userMobile}}</view>
								
							</view>
							<!-- <view :class="info.evaluate == 0 ? '' : info.evaluate == 1 ? 'status3' : 'status4'">
								{{info.evaluate == 0 ? '' : info.evaluate == 1 ? '评价' : '已评价'}}
							</view> -->
							<view @click="cancle(info.id)" :class="info.state == 1 ? 'status' : ''">
								{{info.state == 1 ? '取消' : ''}}
							</view>
						</view>
			
			
					</view>
					<u-loadmore :status="status" :iconSize="17" />
				</view>
			</view>
			<view class="main" v-if="orderList.length != 0 && current == 2">
				<view class="content">
					<view class="infoList_content" v-for="(info,index) in orderList" :key="index">
						<!-- <view :class="info.status == 0 ? 'status' : info.status == 1 ? 'status1' : 'status2'">
							{{info.status == 0 ? '待接单': info.status == 1 ? '待回收' : '已回收'}}
						</view> -->
						<view class="">
			
						</view>
						<view
							:class="info.state == 0 ? 'status' : info.state == 1 ? 'status1' : info.state == 2 ? 'status2' : 'status5'">
							{{info.state == 0 ? '已取消': info.state == 1 ? '待接单' : info.state == 2 ? '待回收' : '已回收'}}
						</view>
						<view class="flx_type" @click="getOrderDetail(info.id)">
							<view class=""> {{info.name == null ? info.typeName : info.name}}</view>
							<view class="weightNum">约 <text>{{info.num == null ? info.totalWeight : info.num}}</text> {{info.unit}}</view>
						</view>
						<view class="line"></view>
						<view class="flx_evaluate">
							<view class="">
								<view class="name" @click="getOrderDetail(info.id)">预约时间: <text>{{info.reservationDay}} {{info.reservationHour}}</text>
								</view>
								<view class="name" @click="getOrderDetail(info.id)">订单编号: {{info.id}}</view>
								<view class="name" @click="getOrderDetail(info.id)">回收人员: {{info.recycleName}}</view>
								<view class="name" @click="makeCall(info.recycleMobile)">服务电话: {{info.recycleMobile}}</view>
								
								<view class="name" @click="getOrderDetail(info.id)">网点信息: {{info.siteName}}</view>
							</view>
							<!-- <view :class="info.evaluate == 0 ? '' : info.evaluate == 1 ? 'status3' : 'status4'">
								{{info.evaluate == 0 ? '' : info.evaluate == 1 ? '评价' : '已评价'}}
							</view> -->
							<view @click="cancle(info.id)" :class="info.state == 1 ? 'status' : ''">
								{{info.state == 1 ? '取消' : ''}}
							</view>
						</view>
					</view>
					<u-loadmore :status="status" :iconSize="17"  />
				</view>
			</view>
			<view class="main" v-if="orderList.length != 0 && current == 3">
				<view class="content">
					<view class="infoList_content"  v-for="(info,index) in orderList" :key="index" >
						<!-- <view :class="info.status == 0 ? 'status' : info.status == 1 ? 'status1' : 'status2'">
							{{info.status == 0 ? '待接单': info.status == 1 ? '待回收' : '已回收'}}
						</view> -->
						<view class="">
			
						</view>
						<view
							:class="info.state == 0 ? 'status' : info.state == 1 ? 'status1' : info.state == 2 ? 'status2' : 'status5'">
							{{info.state == 0 ? '已取消': info.state == 1 ? '待接单' : info.state == 2 ? '待回收' : '已回收'}}
						</view>
						<view class="flx_type" @click="getOrderDetail(info.id)">
							<view class=""> {{info.name == null ? info.typeName : info.name}}</view>
							<view class="weightNum">约 <text>{{info.num == null ? info.totalWeight : info.num}}</text> {{info.unit}}</view>
						</view>
						<view class="line"></view>
						<view class="flx_evaluate">
							<view class="">
								<view class="name" @click="getOrderDetail(info.id)">预约时间: <text>{{info.reservationDay}} {{info.reservationHour}}</text>
								</view>
								<view class="name" @click="getOrderDetail(info.id)">订单编号: {{info.id}}</view>
								<view class="name" @click="getOrderDetail(info.id)">回收人员: {{info.recycleName}}</view>
								<view class="name" @click="makeCall(info.recycleMobile)">服务电话: {{info.recycleMobile}}</view>
								
								<view class="name" @click="getOrderDetail(info.id)">网点信息: {{info.siteName}}</view>
							</view>
							<!-- <view :class="info.evaluate == 0 ? '' : info.evaluate == 1 ? 'status3' : 'status4'">
								{{info.evaluate == 0 ? '' : info.evaluate == 1 ? '评价' : '已评价'}}
							</view> -->
							<view @click="cancle(info.id)" :class="info.state == 1 ? 'status' : ''">
								{{info.state == 1 ? '取消' : ''}}
							</view>
						</view>
					</view>
					<u-loadmore :status="status" :iconSize="17"  />
				</view>
			</view>
			<view class="" v-else-if="orderList.length == 0">
				<view class="center">
					<img src="../../static/images/no_data.png" class="no_data">
					<div>暂无内容~</div>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				itemList: [],
				noData: false,
				cancleFlag: false,
				page: 1,
				limit: 5,
				state: 1, //0已取消 1待接单 2待回收 3已回收
				
				orderList: [],
				list: [{
						id: 1,
						name: '待接单'
					},
					{
						id: 2,
						name: '待回收'
					},
					{
						id: 3,
						name: '已回收'
					},
					{
						id: 0,
						name: '已取消'
					},
				],
				current: 1,
				toBeRecycledRecord:[], //待接单
				recycledRecord:[],     //已回收
				cancleRecycledRecord:[], //已取消
				//需要加载的数据必须要触碰到每一页的底部才会加载数据
				status: 'loadmore',
				suo: true,
				scrollTop0: 0,
				scrollTop1: 0,
				scrollTop2: 0,
				scrollTop3: 0,
			};
		},

		onLoad() {
			var that = this
			that.getOrderRecord()
		},

		methods: {
			getOrderDetail(reservationId){
				console.log(reservationId,'1111111111')
				uni.navigateTo({
					url: `/pagesA/order-record/order-detail?reservationId=${reservationId}`
				});
			},
			makeCall(phone) {
				console.log(phone,'phone')
				let that = this
				this.itemList[0] = phone
				uni.showActionSheet({
					itemList: this.itemList, //itemList字段不变
					success: function(res) {
						if (!res.cancel && res.tapIndex !== undefined) {
							let tapData = this.itemList[res.tapIndex]
							uni.showModal({
								content: `拨打人号码：${phone}`,
								success: function(res) {
									uni.makePhoneCall({
										phoneNumber: tapData,
										success: function() {
										},
										fail: function() {
										}
									});
								}
							})
			
						}
					}.bind(this) // 绑定this作用域
				});
			},
			getSize(id) {
				if (this.current != id) {
					this.current = id

					if (this.current == 0) {
						this.page = 1
						this.state = 0
						uni.pageScrollTo({
							scrollTop: this.scrollTop0,
							duration: 100
						});
						this.getOrderRecord()
						
					} else if (this.current == 1) {
						uni.pageScrollTo({
							scrollTop: this.scrollTop1,
							duration: 100
						});
						this.page = 1
						this.state = 1
						this.getToBeRecycledRecord()
						this.cancleFlag = false
						
					} else if (this.current == 2) {
						uni.pageScrollTo({
							scrollTop: this.scrollTop2,
							duration: 100
						});
						this.page = 1
						this.state = 2
						this.getRecycledRecord()
					} else {
						uni.pageScrollTo({
							scrollTop: this.scrollTop3,
							duration: 100
						});
						this.page = 1
						this.state = 3
						this.getCancleRecycledRecord()
						
					}
				}
			},
			// 待接单
			getOrderRecord() {
				let that = this
				request.get('/api/recycle/reservation/page', {
					page: this.page,
					limit: this.limit,
					state: this.state
				}).then(res => {
					if (res.code == 0) {
						this.orderList = res.data.list
						if (res.data.list.length == '') {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length < 5) {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length = 5) {
							this.status = 'loadmore';
							this.suo = true
						
						}
					}
				})
			},
			// 待接单，上拉请求
			getObottomOrderRecord() {
				let that = this
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				request.get('/api/recycle/reservation/page', {
					page: this.page,
					limit: this.limit,
					state: this.state
				}).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.orderList = this.orderList.concat(res.data.list)
						// this.orderList = res.data.list
						if (res.data.list.length == '') {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length < 5) {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length = 5) {
							this.status = 'loadmore';
							this.suo = true
						
						}
					}
				})
			},
			// 待回收订单记录
			getToBeRecycledRecord() {
				let that = this
				request.get('/api/recycle/reservation/page', {
					page: this.page,
					limit: this.limit,
					state: this.state
				}).then(res => {
					if (res.code == 0) {
						this.orderList = res.data.list
						if (res.data.list.length == '') {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length < 5) {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length = 5) {
							this.status = 'loadmore';
							this.suo = true
						
						}
					}
				})
			},
			// 待接单上拉加载
			getObottomToBeRecycledRecord() {
				let that = this
				request.get('/api/recycle/reservation/page', {
					page: this.page,
					limit: this.limit,
					state: this.state
				}).then(res => {
					if (res.code == 0) {
						this.orderList = this.orderList.concat(res.data.list)
						if (res.data.list.length == '') {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length < 5) {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length = 5) {
							this.status = 'loadmore';
							this.suo = true
						
						}
					}
				})
			},
			// 已回收订单记录
			getRecycledRecord() {
				let that = this
				request.get('/api/recycle/reservation/page', {
					page: this.page,
					limit: this.limit,
					state: this.state
				}).then(res => {
					if (res.code == 0) {
						this.orderList = res.data.list
						if (res.data.list.length == '') {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length < 5) {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length = 5) {
							this.status = 'loadmore';
							this.suo = true
						
						}
					}
				})
			},
			// 已回收订单记录
			getObottomRecycledRecord() {
				let that = this
				request.get('/api/recycle/reservation/page', {
					page: this.page,
					limit: this.limit,
					state: this.state
				}).then(res => {
					if (res.code == 0) {
						this.orderList = this.orderList.concat(res.data.list)
						if (res.data.list.length == '') {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length < 5) {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length = 5) {
							this.status = 'loadmore';
							this.suo = true
						
						}
					}
				})
			},
			// 已取消订单记录
			getCancleRecycledRecord() {
				let that = this
				request.get('/api/recycle/reservation/page', {
					page: this.page,
					limit: this.limit,
					state: this.state
				}).then(res => {
					if (res.code == 0) {
						this.orderList = res.data.list
						if (res.data.list.length == '') {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length < 5) {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length = 5) {
							this.status = 'loadmore';
							this.suo = true
						
						}
					}
				})
			},
			// 上拉加载已取消订单记录
			getObottomCancleRecycledRecord() {
				let that = this
				request.get('/api/recycle/reservation/page', {
					page: this.page,
					limit: this.limit,
					state: this.state
				}).then(res => {
					if (res.code == 0) {
						this.orderList = this.orderList.concat(res.data.list)
						if (res.data.list.length == '') {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length < 5) {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length = 5) {
							this.status = 'loadmore';
							this.suo = true
						
						}
					}
				})
			},
			cancle(id) {
				console.log(id,'id')
				let that = this
				uni.showModal({
					content: '你确定要取消订单吗？',
					success: function(res) {

						if (res.confirm) {
							request.put(`/api/recycle/reservation/${id}`, {
								state: 0
							}).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: '取消成功',
										icon: 'none',
										duration: 2000
									})
									
									
									setTimeout(()=>{
										that.current = 0
									},1000)
									setTimeout(()=>{
										that.state = 0
										uni.pageScrollTo({
											scrollTop: this.scrollTop1,
											duration: 100
										});
										that.getOrderRecord()
									},2000)
									
								} else {
									uni.showToast({
										title: res.message,
										icon: 'none',
										duration: 2000
									})
								}
							})
						} else if (res.cancel) {

						}
					}
				});
			}
		},
		onReachBottom() {
			// this.page = 1;
			if (this.suo) { //定义个小锁，当没有数据时锁住suo
				// this.status = 'loading';
				// this.page = ++this.page;
				// this.page = 1;
				if (this.state == 1) {
					this.status = 'loading';
					this.page = ++this.page;
		
					setTimeout(() => {
						this.getObottomOrderRecord()
					}, 1000)
					return;
				}
				if (this.state == 2) {
					this.status = 'loading';
					this.page = ++this.page;
					setTimeout(() => {
						this.getObottomToBeRecycledRecord()
					}, 1000)
					return;
				}
				if (this.state == 3) {
					this.status = 'loading';
					this.page = ++this.page;
					setTimeout(() => {
						this.getObottomRecycledRecord()
					}, 1000)
					return;
				}
				if (this.state == 0) {
					this.status = 'loading';
					this.page = ++this.page;
					setTimeout(() => {
						this.getObottomCancleRecycledRecord()
					}, 1000)
					return;
				}
			}
		},
		onPageScroll: function(e) { //nvue暂不支持滚动监听，可用bindingx代替
			if (this.state == 1) {
				this.scrollTop1 = 0
			}else if(this.state == 2){
				this.scrollTop2 = 0
			}else if(this.state == 3){
				this.scrollTop3 = 0
			}else if(this.state == 0){
				this.scrollTop0 = 0
			}
		
		},
	}
</script>

<style lang="less" scoped>
	.image {
		width: 702rpx;
		height: 250rpx;
		margin: 24rpx 24rpx 0 24rpx;

		img {
			width: 702rpx;
			height: 250rpx;
		}
	}

	.statusList {
		width: 100%;
		background: #fff;
		z-index: 999;
		height: 120rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.swiper-tab-list {
			position: relative;
			font-size: 36rpx;
			font-weight: 500;
			color: #999;
		}

		.active {
			font-weight: bold;
			color: #333;
		}
	}

	.bottomLine {
		position: absolute;
		left: 50%;
		bottom: -10rpx;
		transform: translateX(-50%);
		width: 48rpx;
		height: 6rpx;
		background: orange;
		border-radius: 5rpx;
		text-align: center;
	}

	.content {
		width: 100%;
		margin-top: 28rpx;

		.infoList_content {
			// height: 310rpx;
			background: #FFFFFF;
			margin: 0 24rpx 24rpx;
			padding:  28rpx 28rpx 16rpx;

			.status,
			.status1,
			.status2,
			.status3,
			.status4,
			.status5 {
				width: 120rpx;
				height: 50rpx;
				font-family: Source Han Sans SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				background: red;
				border-radius: 10rpx;
				text-align: center;
				line-height: 50rpx;
				// margin: 0 0 24rpx 36rpx;
				// margin-left: 36rpx;
			}

			.status1 {
				
				background: orange;
			}

			.status2 {
				// color: #999;
				background:#3EAAFB;

			}

			.status3 {
				background: #ff2626;
				margin: 0;
			}

			.status4 {
				color: #999;
				background: #EBEBEB;
				margin: 0;
			}

			.status5 {
				// color: #999;
				background: #3EAAFB;

			}

			.flx_type {
				// display: flex;
				// justify-content: center;
				// align-items: center;
				font-family: Source Han Sans SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #000000;
				// line-height: 84rpx;
                margin-top: 20rpx;
				.weightNum {
					font-weight: 400;
					font-size: 24rpx;
					// margin-left: 30rpx;

					text {
						font-size: 60rpx;
						color:var(--global-bg-color);
						margin: 0 10rpx;
					}
				}
			}

			.line {
				width: 100%;
				height: 1rpx;
				background: #EBEBEB;
				margin: 40rpx 0 15rpx;
			}

			.time {
				font-family: Source Han Sans SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;

				text {
					font-size: 24rpx;
					color: #999;
					margin-left: 10rpx;
				}
			}

			.flx_evaluate {
				display: flex;
				justify-content: space-between;
				align-items: center;
				// padding: 0 20rpx;
			}
		}
	}

	.center {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		text-align: center;
		margin-top: 200rpx;
	}

	.no_data {
		width: 380rpx;
		height: 300rpx;
	}

	.no_data {
		width: 380rpx;
		height: 300rpx;
	}

	.main {
		width: 100%;
		padding-top: 14rpx;
		padding-bottom: 14rpx;
		background: #F1F4F9;
		
	}
	.fixed{
		position: fixed;
		height: 375rpx;
		background: #F1F4F9;
	}
	.top{
		padding-top: 380rpx;
	}
</style>